<template>
  <a-modal
    v-model:visible="visible"
    :title="formData && formData.id ? '修改字典' :'新增字典'"
    draggable
    :width="width"
    @cancel="handleCancel"
  >
    <a-form :model="formData" ref="formRef" auto-label-width>
      <a-spin :loading="loading">
        <a-form-item
          label="数据标签"
          field="label"
          :rules="[{required:true, message:'数据标签不能为空'}]"
          :validate-trigger="['blur']"
        >
          <a-input v-model="formData.label" placeholder="请输入数据标签" allow-clear />
        </a-form-item>
        <a-form-item
          label="数据键值"
          field="value"
          :rules="[{required:true, message:'数据键值不能为空'}]"
          :validate-trigger="['blur']"
        >
          <a-input v-model="formData.value" placeholder="请输入数据键值" allow-clear />
        </a-form-item>
        <a-form-item label="样式属性" field="value">
          <a-input v-model="formData.cssClass" placeholder="请输入样式属性" allow-clear />
        </a-form-item>
        <a-form-item label="回显样式" field="value">
          <a-select
            v-model="formData.listClass"
            placeholder="请选择回显样式"
            allow-clear
          >
            <a-option v-for="item in listClassValues" :value="item.value">{{ item.label }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="显示排序"
          field="value"
          :rules="[{required:true, message:'显示排序不能为空'}]"
          :validate-trigger="['blur']"
        >
          <a-input-number v-model="formData.sort" placeholder="请输入显示排序" allow-clear />
        </a-form-item>
        <a-form-item
          label="状态"
          field="status"
          :rules="[{required:true, message:'状态不能为空'}]"
          :validate-trigger="['blur']"
        >
          <a-switch type="round" v-model="formData.status" :checked-value="1" :unchecked-value="0" />
        </a-form-item>
        <a-form-item label="备注" field="remark">
          <a-textarea v-model="formData.remark" placeholder="请输入备注" allow-clear />
        </a-form-item>
      </a-spin>
    </a-form>
    <template #footer>
      <a-button
        style="margin-right: 8px"
        @click="handleCancel"
      >{{ $t('searchTable.columns.operations.close') }}</a-button>
      <a-button
        type="primary"
        @click="handleSubmit"
        :loading="loading"
      >{{ $t('searchTable.columns.operations.save') }}</a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import { Modal, Message } from '@arco-design/web-vue';
import { saveDict, updateDict, DictData } from '@/api/sys/dict';

const { t } = useI18n();

const loading = ref(false);
const visible = ref(false);
const width = ref('calc(28%)');

const formRef = ref();
const formData = ref<DictData>({
  status: 0,
});
const changed = ref(false);

interface listClass {
  label: string;
  value: string;
}

const listClassValues = ref<listClass[]>([
  { label: '默认(default)', value: 'default' },
  { label: '主要(primary)', value: 'primary' },
  { label: '成功(success)', value: 'success' },
  { label: '信息(info)', value: 'info' },
  { label: '警告(warning)', value: 'warning' },
  { label: '危险(danger)', value: 'danger' },
]);

const emit = defineEmits({ onSearch: null });

// 打开弹窗
const onOpen = (record: any, dictType: string) => {
  if (record) {
    formData.value = JSON.parse(JSON.stringify(record));
  } else {
    formData.value = {
      status: 0,
      sort: 0,
      dictType: dictType,
    };
  }
  nextTick(() => {
    changed.value = false;
  });
  visible.value = true;
};

// 确认
const handleSubmit = async () => {
  formRef.value.validate().then((result: any) => {
    // 校验不通过
    if (result) {
      return;
    }
    loading.value = true;
    if (formData.value.id) {
      updateDict(formData.value)
        .then(() => {
          onOk();
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      saveDict(formData.value)
        .then(() => {
          onOk();
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
};

// 确认
const onOk = () => {
  formRef.value.clearValidate();
  formData.value = {};
  visible.value = false;
  Message.success(t('operations.success'));
  emit('onSearch');
};

// 取消
const handleCancel = () => {
  if (!changed.value) {
    onCancel();
  } else {
    Modal.confirm({
      title: t('operations.cancel.title'),
      content: '',
      onOk() {
        onCancel();
      },
      onCancel() {
        visible.value = true;
      },
    });
  }
};

// 取消
const onCancel = () => {
  formRef.value.clearValidate();
  formData.value = {};
  visible.value = false;
};

// 抛出函数
defineExpose({
  onOpen,
});

// 监听数据
watch(
  formData,
  (newValue, oldValue) => {
    changed.value = true;
  },
  { deep: true }
);
</script>